<template>
  <div class="tool-bar">
    <div class="bar-cond">
      <template v-for="condItem in items">
        <div v-if="condItem.type==='select'" :key="condItem.key" :class="{'bar-cond-item': true, 'next-line': condItem.nextLine}">
          <el-select
            v-model="_cond[condItem.key]"
            filterable
            remote
            clearable
            reserve-keyword
            :allow-create="condItem.allowCreate"
            :multiple="condItem.multiple"
            :collapse-tags="condItem.collapse"
            :placeholder="condItem.placeholder"
            :remote-method="condItem.remote"
            :loading="loading"
            @clear="clearCond(condItem.onClear)"
          >
            <el-option
              v-for="item in options[condItem.option]"
              :key="item.value !== undefined? item.value: item"
              :label="item.label !== undefined? item.label: item"
              :value="item.value !== undefined? item.value: item"
            />
          </el-select>
        </div>
        <div v-if="condItem.type==='date-piker'" :key="condItem.key" style="float: left">
          <el-date-picker
            v-model="_cond[condItem.key]"
            value-format="timestamp"
            type="datetimerange"
            :start-placeholder="`${condItem.placeholder}起`"
            :end-placeholder="`${condItem.placeholder}止`"
            :default-time="['00:00:00']"
          />
        </div>
        <div v-if="condItem.type==='input'" :key="condItem.key" class="bar-cond-item">
          <el-input v-model="_cond[condItem.key]" clearable :placeholder="condItem.placeholder" />
        </div>
      </template>
      <div class="bar-control">
        <el-button icon="el-icon-search" @click="callback('search')">搜索</el-button>
        <el-button class="el-icon-refresh" style="margin-left: 8px" @click="callback('refresh')">刷新</el-button>
        <el-dropdown split-button style="margin-left: 8px" @command="callback" @click="callback('export_all')">
          导出所有
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="export_ytl">YTL导出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<style scoped>
    .tool-bar {
        float: left;
        margin: 0 8px 8px 0;
    }

    .bar-control {
        float: left;
        margin: 0 0 0 8px;
    }

    .bar-cond {
        float: left;
    }

    .bar-cond-item {
        float: left;
        width: 150px;
    }

    .next-line {
      clear: left;
    }

    /deep/ .bar-cond-item .el-input__inner {
        border-radius: 0;
    }
</style>
<script>
import fota from '../../api/fota'

export default {
  props: {
    'cond': {
      type: Object,
      default: function() {
        return { createRange: [], updateRange: [] }
      }
    }
  },
  data() {
    return {
      plans: [],
      loading: false,
      items: [],
      options: {
        products: [],
        versions: [],
        operator: [{ 'label': '查询', 'value': 1 }, { 'label': '下载', 'value': 2 }],
        auto: [{ 'label': '手动', 'value': 0 }, { 'label': '自动', 'value': 1 }]
      },
      unfold: false
    }
  },
  computed: {
    _cond: {
      get: function() {
        return this.cond
      },
      set: function(val) {
        this.$emit('update:cond', val)
      }
    }
  },
  mounted() {
  },
  created() {
    this.items = [
      { key: 'imei', placeholder: 'IMEI', type: 'input' },
      { key: 'product', placeholder: '产品名称', remote: this.loadProduct, option: 'products', type: 'select' },
      { key: 'srcV', placeholder: '当前版本', remote: this.loadVersions, option: 'versions', type: 'select' },
      { key: 'dstV', placeholder: '目标版本', remote: this.loadVersions, option: 'versions', type: 'select' },
      { key: 'createRange', placeholder: '创建时间', type: 'date-piker' },
      { key: 'operator', placeholder: '操作类型', option: 'operator', onClear: 'operator', type: 'select', nextLine: true },
      { key: 'auto', placeholder: '下载类型', option: 'auto', onClear: 'auto', type: 'select' },
      { key: 'userIp', placeholder: '用户IP', type: 'input' },
      { key: 'updateRange', placeholder: '创建时间', type: 'date-piker' }
    ]
  },
  methods: {
    clearCond: function(val) {
      switch (val) {
        case 'operator':
          this.cond.operator = undefined
          break
        case 'auto':
          this.cond.auto = undefined
          break
        default:
          break
      }
    },
    loadProduct: function(val) {
      this.loading = true
      const self = this
      if (val !== undefined && val.trim() !== '') {
        fota.queryProducts(val).then(resp => {
          self.options.products = resp.data
          this.loading = false
        }, () => {
          fota.notifyError(`查询产品列表失败！`)
          this.loading = false
        })
      }
    },
    loadVersions: function(val) {
      this.loading = true
      const self = this
      if (val !== undefined && val.trim() !== '') {
        const product = this.cond.product === undefined || this.cond.product.trim() === '' ? 'ALL' : this.cond.product
        fota.queryVersions(product, val).then(resp => {
          self.options.versions = resp.data
          this.loading = false
        }, () => {
          fota.notifyError(`查询产品版本列表失败！`)
          this.loading = false
        })
      }
    },
    callback: function(val) {
      this.$emit('callback', val)
    }
  }
}
</script>
